<template>
  <div class="system-data">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>数据管理</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="数据备份" name="dataBackup">
            <div class="data-backup-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>数据备份策略</span>
                    <div class="header-actions">
                      <el-button type="primary" @click="createBackup">立即备份</el-button>
                    </div>
                  </div>
                </template>
                
                <el-form :model="backupForm" label-width="120px">
                  <el-form-item label="备份周期">
                    <el-select v-model="backupForm.cycle" placeholder="请选择备份周期">
                      <el-option label="每日" value="daily" />
                      <el-option label="每周" value="weekly" />
                      <el-option label="每月" value="monthly" />
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="备份时间">
                    <el-time-picker
                      v-model="backupForm.time"
                      format="HH:mm"
                      placeholder="选择备份时间"
                    />
                  </el-form-item>
                  
                  <el-form-item label="备份保留">
                    <el-slider
                      v-model="backupForm.retention"
                      :min="1"
                      :max="365"
                      show-input
                    />
                    <div class="slider-desc">天</div>
                  </el-form-item>
                  
                  <el-form-item label="备份范围">
                    <el-checkbox-group v-model="backupForm.scope">
                      <el-checkbox label="用户数据" />
                      <el-checkbox label="业务数据" />
                      <el-checkbox label="系统配置" />
                      <el-checkbox label="日志数据" />
                    </el-checkbox-group>
                  </el-form-item>
                  
                  <el-form-item>
                    <el-button type="primary" @click="saveBackupConfig">保存配置</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
              
              <el-card style="margin-top: 20px;">
                <template #header>
                  <div class="card-header">
                    <span>备份记录</span>
                  </div>
                </template>
                
                <el-table :data="backupRecords" style="width: 100%">
                  <el-table-column prop="time" label="备份时间" width="180" />
                  <el-table-column prop="type" label="备份类型" width="120" />
                  <el-table-column prop="size" label="大小" width="100" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="getBackupStatusType(scope.row.status)">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="location" label="存储位置" />
                  <el-table-column label="操作" width="200">
                    <template #default="scope">
                      <el-button size="small" @click="viewBackupDetails(scope.row)">详情</el-button>
                      <el-button size="small" @click="restoreBackup(scope.row)">恢复</el-button>
                      <el-button size="small" type="danger" @click="deleteBackup(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="数据恢复" name="dataRecovery">
            <div class="data-recovery-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>数据恢复</span>
                  </div>
                </template>
                
                <el-alert
                  title="数据恢复操作不可逆，请谨慎操作"
                  type="warning"
                  show-icon
                  style="margin-bottom: 20px;"
                />
                
                <el-form :model="recoveryForm" label-width="120px">
                  <el-form-item label="恢复时间点">
                    <el-date-picker
                      v-model="recoveryForm.recoveryTime"
                      type="datetime"
                      placeholder="选择恢复时间点"
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </el-form-item>
                  
                  <el-form-item label="恢复范围">
                    <el-checkbox-group v-model="recoveryForm.scope">
                      <el-checkbox label="用户数据" />
                      <el-checkbox label="业务数据" />
                      <el-checkbox label="系统配置" />
                    </el-checkbox-group>
                  </el-form-item>
                  
                  <el-form-item label="恢复方式">
                    <el-radio-group v-model="recoveryForm.method">
                      <el-radio label="覆盖恢复">覆盖恢复</el-radio>
                      <el-radio label="增量恢复">增量恢复</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  
                  <el-form-item>
                    <el-button type="primary" @click="startRecovery">开始恢复</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
              
              <el-card style="margin-top: 20px;">
                <template #header>
                  <div class="card-header">
                    <span>恢复记录</span>
                  </div>
                </template>
                
                <el-table :data="recoveryRecords" style="width: 100%">
                  <el-table-column prop="time" label="恢复时间" width="180" />
                  <el-table-column prop="backupTime" label="备份时间点" width="180" />
                  <el-table-column prop="scope" label="恢复范围" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="getRecoveryStatusType(scope.row.status)">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="duration" label="耗时" width="100" />
                  <el-table-column label="操作" width="120">
                    <template #default="scope">
                      <el-button size="small" @click="viewRecoveryDetails(scope.row)">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="数据清理" name="dataCleanup">
            <div class="data-cleanup-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>数据清理策略</span>
                    <div class="header-actions">
                      <el-button type="primary" @click="executeCleanup">立即清理</el-button>
                    </div>
                  </div>
                </template>
                
                <el-form :model="cleanupForm" label-width="120px">
                  <el-form-item label="日志保留">
                    <el-slider
                      v-model="cleanupForm.logRetention"
                      :min="1"
                      :max="365"
                      show-input
                    />
                    <div class="slider-desc">天</div>
                  </el-form-item>
                  
                  <el-form-item label="临时文件">
                    <el-slider
                      v-model="cleanupForm.tempRetention"
                      :min="1"
                      :max="30"
                      show-input
                    />
                    <div class="slider-desc">天</div>
                  </el-form-item>
                  
                  <el-form-item label="缓存数据">
                    <el-slider
                      v-model="cleanupForm.cacheRetention"
                      :min="1"
                      :max="30"
                      show-input
                    />
                    <div class="slider-desc">天</div>
                  </el-form-item>
                  
                  <el-form-item label="自动清理">
                    <el-switch v-model="cleanupForm.autoCleanup" />
                  </el-form-item>
                  
                  <el-form-item label="清理时间">
                    <el-time-picker
                      v-model="cleanupForm.cleanupTime"
                      format="HH:mm"
                      placeholder="选择清理时间"
                      :disabled="!cleanupForm.autoCleanup"
                    />
                  </el-form-item>
                  
                  <el-form-item>
                    <el-button type="primary" @click="saveCleanupConfig">保存配置</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
              
              <el-card style="margin-top: 20px;">
                <template #header>
                  <div class="card-header">
                    <span>清理记录</span>
                  </div>
                </template>
                
                <el-table :data="cleanupRecords" style="width: 100%">
                  <el-table-column prop="time" label="清理时间" width="180" />
                  <el-table-column prop="type" label="清理类型" width="120" />
                  <el-table-column prop="size" label="清理大小" width="120" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="getCleanupStatusType(scope.row.status)">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="duration" label="耗时" width="100" />
                  <el-table-column label="操作" width="120">
                    <template #default="scope">
                      <el-button size="small" @click="viewCleanupDetails(scope.row)">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="数据迁移" name="dataMigration">
            <div class="data-migration-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>数据迁移</span>
                  </div>
                </template>
                
                <el-alert
                  title="数据迁移操作可能需要较长时间，请确保系统稳定"
                  type="info"
                  show-icon
                  style="margin-bottom: 20px;"
                />
                
                <el-form :model="migrationForm" label-width="120px">
                  <el-form-item label="源数据库">
                    <el-input v-model="migrationForm.sourceDb" placeholder="请输入源数据库连接信息" />
                  </el-form-item>
                  
                  <el-form-item label="目标数据库">
                    <el-input v-model="migrationForm.targetDb" placeholder="请输入目标数据库连接信息" />
                  </el-form-item>
                  
                  <el-form-item label="迁移范围">
                    <el-checkbox-group v-model="migrationForm.scope">
                      <el-checkbox label="用户数据" />
                      <el-checkbox label="业务数据" />
                      <el-checkbox label="系统配置" />
                    </el-checkbox-group>
                  </el-form-item>
                  
                  <el-form-item label="迁移方式">
                    <el-radio-group v-model="migrationForm.method">
                      <el-radio label="全量迁移">全量迁移</el-radio>
                      <el-radio label="增量迁移">增量迁移</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  
                  <el-form-item>
                    <el-button type="primary" @click="startMigration">开始迁移</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
              
              <el-card style="margin-top: 20px;">
                <template #header>
                  <div class="card-header">
                    <span>迁移记录</span>
                  </div>
                </template>
                
                <el-table :data="migrationRecords" style="width: 100%">
                  <el-table-column prop="startTime" label="开始时间" width="180" />
                  <el-table-column prop="endTime" label="结束时间" width="180" />
                  <el-table-column prop="scope" label="迁移范围" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="getMigrationStatusType(scope.row.status)">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="progress" label="进度" width="120">
                    <template #default="scope">
                      <el-progress :percentage="scope.row.progress" :status="getProgressStatus(scope.row.status)" />
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150">
                    <template #default="scope">
                      <el-button size="small" @click="viewMigrationDetails(scope.row)">详情</el-button>
                      <el-button 
                        v-if="scope.row.status === '进行中'"
                        size="small" 
                        type="danger" 
                        @click="stopMigration(scope.row)"
                      >
                        停止
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 响应式数据
const activeTab = ref('dataBackup')

// 备份表单
const backupForm = reactive({
  cycle: 'daily',
  time: '',
  retention: 30,
  scope: ['用户数据', '业务数据', '系统配置']
})

// 恢复表单
const recoveryForm = reactive({
  recoveryTime: '',
  scope: ['用户数据', '业务数据'],
  method: '覆盖恢复'
})

// 清理表单
const cleanupForm = reactive({
  logRetention: 90,
  tempRetention: 7,
  cacheRetention: 3,
  autoCleanup: true,
  cleanupTime: ''
})

// 迁移表单
const migrationForm = reactive({
  sourceDb: '',
  targetDb: '',
  scope: ['用户数据', '业务数据'],
  method: '全量迁移'
})

// 备份记录
const backupRecords = ref([
  {
    time: '2023-06-15 02:00:00',
    type: '自动备份',
    size: '2.5GB',
    status: '成功',
    location: '本地存储'
  },
  {
    time: '2023-06-14 02:00:00',
    type: '自动备份',
    size: '2.4GB',
    status: '成功',
    location: '本地存储'
  }
])

// 恢复记录
const recoveryRecords = ref([
  {
    time: '2023-06-10 14:30:22',
    backupTime: '2023-06-01 02:00:00',
    scope: '用户数据,业务数据',
    status: '成功',
    duration: '15分钟'
  }
])

// 清理记录
const cleanupRecords = ref([
  {
    time: '2023-06-15 03:00:00',
    type: '日志清理',
    size: '150MB',
    status: '成功',
    duration: '2分钟'
  }
])

// 迁移记录
const migrationRecords = ref([
  {
    startTime: '2023-06-01 10:00:00',
    endTime: '2023-06-01 12:30:00',
    scope: '用户数据',
    status: '成功',
    progress: 100
  }
])

// 方法
const createBackup = () => {
  ElMessage.info('开始创建备份')
  // 模拟备份过程
  setTimeout(() => {
    ElMessage.success('备份创建成功')
    backupRecords.value.unshift({
      time: new Date().toLocaleString(),
      type: '手动备份',
      size: '2.6GB',
      status: '成功',
      location: '本地存储'
    })
  }, 2000)
}

const saveBackupConfig = () => {
  ElMessage.success('备份配置保存成功')
}

const viewBackupDetails = (row: any) => {
  ElMessage.info(`查看备份详情: ${row.time}`)
}

const restoreBackup = (row: any) => {
  ElMessageBox.confirm(
    `确定要恢复 ${row.time} 的备份数据吗？此操作不可逆。`,
    '数据恢复确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.info('开始恢复备份数据')
    // 模拟恢复过程
    setTimeout(() => {
      ElMessage.success('数据恢复成功')
      recoveryRecords.value.unshift({
        time: new Date().toLocaleString(),
        backupTime: row.time,
        scope: '用户数据,业务数据',
        status: '成功',
        duration: '12分钟'
      })
    }, 3000)
  })
}

const deleteBackup = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除 ${row.time} 的备份数据吗？`,
    '删除备份确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('备份删除成功')
    // 从列表中移除
    const index = backupRecords.value.indexOf(row)
    if (index > -1) {
      backupRecords.value.splice(index, 1)
    }
  })
}

const startRecovery = () => {
  ElMessage.info('开始数据恢复')
}

const viewRecoveryDetails = (row: any) => {
  ElMessage.info(`查看恢复详情: ${row.time}`)
}

const executeCleanup = () => {
  ElMessage.info('开始执行数据清理')
  // 模拟清理过程
  setTimeout(() => {
    ElMessage.success('数据清理完成')
    cleanupRecords.value.unshift({
      time: new Date().toLocaleString(),
      type: '手动清理',
      size: '200MB',
      status: '成功',
      duration: '3分钟'
    })
  }, 1500)
}

const saveCleanupConfig = () => {
  ElMessage.success('清理配置保存成功')
}

const viewCleanupDetails = (row: any) => {
  ElMessage.info(`查看清理详情: ${row.time}`)
}

const startMigration = () => {
  ElMessage.info('开始数据迁移')
  // 模拟迁移过程
  migrationRecords.value.unshift({
    startTime: new Date().toLocaleString(),
    endTime: '',
    scope: migrationForm.scope.join(','),
    status: '进行中',
    progress: 0
  })
  
  // 模拟迁移进度
  const record = migrationRecords.value[0]
  const interval = setInterval(() => {
    record.progress += 10
    if (record.progress >= 100) {
      clearInterval(interval)
      record.status = '成功'
      record.endTime = new Date().toLocaleString()
      ElMessage.success('数据迁移完成')
    }
  }, 500)
}

const viewMigrationDetails = (row: any) => {
  ElMessage.info(`查看迁移详情: ${row.startTime}`)
}

const stopMigration = (row: any) => {
  ElMessageBox.confirm(
    '确定要停止当前数据迁移任务吗？',
    '停止迁移确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.info('正在停止迁移任务')
    row.status = '已停止'
    ElMessage.success('迁移任务已停止')
  })
}

// 工具方法
const getBackupStatusType = (status: string) => {
  switch (status) {
    case '成功': return 'success'
    case '失败': return 'danger'
    case '进行中': return 'warning'
    default: return 'info'
  }
}

const getRecoveryStatusType = (status: string) => {
  switch (status) {
    case '成功': return 'success'
    case '失败': return 'danger'
    case '进行中': return 'warning'
    default: return 'info'
  }
}

const getCleanupStatusType = (status: string) => {
  switch (status) {
    case '成功': return 'success'
    case '失败': return 'danger'
    case '进行中': return 'warning'
    default: return 'info'
  }
}

const getMigrationStatusType = (status: string) => {
  switch (status) {
    case '成功': return 'success'
    case '失败': return 'danger'
    case '进行中': return 'warning'
    case '已停止': return 'info'
    default: return 'info'
  }
}

const getProgressStatus = (status: string) => {
  switch (status) {
    case '成功': return 'success'
    case '失败': return 'exception'
    default: return ''
  }
}
</script>

<style scoped>
.system-data {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.slider-desc {
  display: inline-block;
  margin-left: 10px;
  color: #606266;
}

.stat-card {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}
</style>